<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <canvas id="canvas" type="2d" style="width:284px; height:510px" />
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <!-- <canvas canvas-id="canvas" id="canvas" style="width:100px; height:100px" /> -->
    <!-- #endif -->
  </view>
</template>

<script>
  import DrawPoster from 'u-draw-poster'
  export default {
    data() {
      return {
        // href: 'https://uniapp.dcloud.io/component/README?id=uniui'
      }
    },
    async onReady() {
      // 1.传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制
      const dp = await DrawPoster.build("canvas")
      console.log('canvas实例')
      console.log(dp)
      // 2.设置长高为100px的矩形宽高
      dp.canvas.width = 284
      dp.canvas.height = 510
      // 3.准备绘制背景与文字
      dp.draw(async (ctx) => {
        // ctx.drawImage | ctx.drawRoundImage | ctx.fillWarpText | ....
        // 绘制图片, 绘制圆角，
        // 画布背景色
        ctx.fillStyle = "#FFFFFF";
        // 绘制“被填充”的矩形， 位置，画布大小
        // ctx.fillRect(0, 0, dp.canvas.width, dp.canvas.height);
        // 设置或返回在绘制文本时使用的当前文本基线
        ctx.textBaseline = "top";
        // 设置或返回文本内容的当前对齐方式
        ctx.textAlign = "start";
        // 设置或返回用于填充绘画的颜色、渐变或模式
        ctx.fillStyle = "white";
        // 字体
        // ctx.font = `bold ${22}px sans-serif`;
        // 绘制文字，在画布中的位置
        // ctx.fillText('周先生', dp.canvas.width / 3, 10)
        const url1 = "/static/1.png";
        const url2 = "/static/2.png";
        // 距离画布位置，宽高
        // 绘制图片 图片左上角的位置，宽高
        
        // 1.绘制背景图
        await ctx.drawImage(url1, 0, 0, 284, 510)
        // 图片圆角
        // await ctx.drawRoundImage(url, 0, 0, 284, 510, 50);
        // 2.绘制文字
        ctx.font = `bold ${16}px sans-serif`;
        ctx.fillText('云忆邀请您抢购', 88, 100)
        // 3.绘制图片
        await ctx.drawImage(url2, 20, 124, 245, 245)
        // 4. 绘制文字
        ctx.font = `bold ${12}px sans-serif`;
        ctx.fillText('【a1水果土司】网红零食面包早餐 水果夹心', 28, 377)
        ctx.fillText('土司2整箱 3种口位任选', 20, 397)
        // 5.绘制价格
        ctx.font = `bold ${12}px sans-serif`;
        ctx.fillText('19.90元', 62, 444)
        ctx.font = `bold ${22}px sans-serif`;
        ctx.fillText('39.90', 86, 468)
        ctx.font = `bold ${12}px sans-serif`;
        // 6.绘制价格和中划线
        ctx.textBaseline="middle";
        ctx.fillText('原价￥59.80元', 164, 480)
        // 7.划线
        ctx.beginPath();
        ctx.lineWidth="1";
        ctx.strokeStyle="gray";
        ctx.moveTo(160,480);
        ctx.lineTo(252,480);
        ctx.stroke(); // 进行绘制
      })
      
      // 4.开始绘制
      const result = await dp.awaitCreate();
      // 绘制成功将返回每个任务的绘制状况组成的数组
      console.log("draw绘制状况:", result); // draw绘制状况: [true]
      // 5.生成图片地址
      const posterImgUrl = await dp.createImagePath();
      console.log("绘制生成本地地址:", posterImgUrl); // ...tmp...
    },
    methods: {

    }
  }
</script>

<style>
  .container {
    padding: 20px;
    font-size: 14px;
    line-height: 24px;
    background-color: gray;
  }
</style>
